<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to SceneView - Create a 3D map - 4.10</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/views/SceneView",
      "esri/layers/VectorTileLayer",
      "esri/geometry/SpatialReference"
    ], function (Map, MapView, SceneView, VectorTileLayer, SpatialReference) {

      var map = new Map({
        basemap: "streets",
        ground: "world-elevation"
      });

      var view = new MapView({
        container: "viewDiv", // Reference to the scene div created in step 5
        spatialReference: new SpatialReference(3857),
        map: map, // Reference to the map object created before the scene
        zoom: 4, // Sets zoom level based on level of detail (LOD)
        center: [116, 39] // Sets center point of view using longitude,latitude
      });

      // var view = new SceneView({
      //   container: "viewDiv",
      //   map: map,
      //   scale: 50000000,
      //   center: [116, 39],
      // });

      var tileLayer = new VectorTileLayer({
        style: {
          "version": 8,
          "sources": {
            "china": {
              "type": 'vector',
              "scheme": "xyz",
              "tiles": [
                "http://localhost:8008/geoserver/gwc/service/tms/1.0.0/china:china@EPSG:900913@pbf/{z}/{x}/{y}.pbf"
              ]
            }
          },
          "layers": [{
            "id": "china-layer",
            "type": "line",
            "source": "china",
            "source-layer": "province",
            "paint": {
              "line-color": "#FF0000",
              "line-opacity": 0.5
            }
          }]
        }
      });
      map.add(tileLayer);

    });

  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
